<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>OAuth2单点登录</title>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
<input type="hidden" th:value="${errorMsg}" id="errorMsg"/>
<input type="hidden" th:value="${loginType}" id="loginType"/>
<input type="hidden" th:value="${username}" id="username"/>
<div class="login">
    <div class="sso-form" id="ssoLogin">
        <div>
            <h2>OAuth2单点登录</h2>
            <ul class="nav nav-tabs">
                <li v-bind:class="{ active: userPasswordVisible }"><a href="#" @click.prevent="showUserPassword">账号密码</a></li>
                <li v-bind:class="{ active: phoneSmsCodeVisible }"><a href="#" @click.prevent="showPhoneSmsCode">短信登录</a></li>
                <li v-bind:class="{ active: qrCodeVisible }"><a href="#" @click.prevent="showQrCode">扫码登录</a>
                </li>
            </ul>
        </div>
        <div class="form-group">
            <div class="error-msg" v-show="errorVisible">{{errorMsg}}</div>
        </div>
        <div v-show="userPasswordVisible">
            <form id="login" action="" method="post">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-user"></span>
                        </span>
                        <input type="text" name="username" v-model="username" class="form-control" placeholder="用户名">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-eye-open"></span>
                    </span>
                        <input type="text" name="captchaValue" v-model="captchaValue" class="form-control" placeholder="验证码">
                        <input type="hidden" name="captchaKey" v-model="captchaKey">
                        <span class="input-group-btn">
                        <img :src="captchaUrl" @click="getCaptcha" class="captcha"/>
                    </span>
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-lock"></span>
                    </span>
                        <input type="password" name="password" v-model="password" class="form-control"
                               placeholder="密码">
                    </div>
                </div>
                <!--下面是记住我输入框-->
                <div class="checkbox">
                    <label>
                        <input v-model="rememberMe" type="checkbox" name="rememberMe" :value="rememberMe"/>记住我
                    </label>
                </div>
                <input type="hidden" v-model="loginType" name="loginType"/>
                <button type="button" class="btn btn-primary" @click="login">登录</button>
            </form>
        </div>
        <div v-show="phoneSmsCodeVisible">
            <form id="smsLogin" method="post">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-user"></span>
                        </span>
                        <input type="text" name="username" v-model="phone" class="form-control" placeholder="手机号">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">
                        <span class="glyphicon glyphicon-eye-open"></span>
                        </span>
                        <input type="text" name="password" class="form-control" placeholder="验证码" v-model="codeValue">
                        <span class="input-group-btn">
                    <button class="btn btn-default btn-block" type="button" @click="sendMsg" :disabled="codeDisabled">{{codeButton}}</button>
                    </span>
                    </div>
                </div>
                <input type="hidden" v-model="loginType" name="loginType"/>
                <button type="button" class="btn btn-primary" @click="smsLogin">登录</button>
            </form>
        </div>
        <div v-show="qrCodeVisible">
            <form id="qrCodeLogin" method="post">
                <input type="hidden" v-model="qrCodeName" name="username"/>
                <input type="hidden" v-model="qrCodeSecret" name="password"/>
                <input type="hidden" v-model="loginType" name="loginType"/>
            </form>
            <div class="col-md-12 col-md-offset-1">
                <img class="qr-code" v-if="allowScan" id="qrCode" :src="qrCode"/>
                <img class="qr-code" v-if="!allowScan" id="qrCodeCancel" src="img/qrcode_invalid.png"  @click="refreshQrCode"/>
            </div>
            <div class="col-md-12 col-md-offset-3">
                <label>{{qrCodeDesc}}</label>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/login.js">
</script>
</body>
</html>